<template>
    <div class="tableWrapper">
        <el-row>
          <el-form :model="searchForm" :inline="true" class="search">
            <el-form-item class="first">
              <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddDictData">添加字典</el-button>
            </el-form-item>
            <el-form-item label="关键字">
              <el-input size="mini" v-model="searchForm.dictSearch" placeholder="请输入关键字">
              </el-input>
            </el-form-item>
            <el-form-item label="是否启用" class="select">
              <el-select v-model="searchForm.enabled" size="mini">
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否固定" class="select">
              <el-select v-model="searchForm.fixed" size="mini">
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="mini" type="primary" @click="getDictPage" icon="el-icon-search">查询</el-button>
              <el-button size="mini" type="primary" @click="reset" icon="el-icon-refresh-right">重置</el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <div class="tableDiv">
          <el-table :data="dictData" border style="width: 100%;" height="100%" v-loading="loading">
            <el-table-column prop="dictValue" align="center" label="字典值" min-width="160">
            </el-table-column>
            <el-table-column prop="dictLabel" align="center" label="字典名称" min-width="160">
            </el-table-column>          
            <el-table-column label="是否启用" min-width="100" align="center">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.enabled == 1">是</el-tag>
                <el-tag v-else type="danger">否</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="是否固定" min-width="100" align="center">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.fixed == 1">是</el-tag>
                <el-tag v-else type="danger">否</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="remark" align="center" label="备注" min-width="160">
            </el-table-column>
            <el-table-column prop="sortOrder" align="center" label="排序" min-width="100">
            </el-table-column>
            <el-table-column align="center" fixed="right" label="操作" width="150">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEditDict(scope.row)" v-if="scope.row.fixed != 1"></el-button>
                <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDeleteDict(scope.row)" v-if="scope.row.fixed != 1"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <AddDictData :propAddData="propAddData" @updateDictDataList="updateDictDataList"></AddDictData>
        <EditDictData :propEditData="propEditData" @updateDictDataList="updateDictDataList"></EditDictData>
    </div>
</template>
<script>
import { deleteDictData, getDictDataList } from '@/api/tools/dict.js';
import AddDictData from './AddDictData.vue';
import EditDictData from './EditDictData.vue';
export default {
    data() {
      return {
        typeId: '',
        typeName: '',
        searchForm: {
          dictSearch: '',
          enabled: null,
          fixed: null,
          typeCode: ''
        },
        dictData: [],
        loading: false,
        propAddData: { // 传给添加字典组件的值
          dictDataDialogFormVisible: false,
          typeCode: '',
          len: 0,
          typeName: ''
        },
        propEditData: { // 传给编辑字典组件的值
          dictDataDialogFormVisible: false,
          typeCode: '',
          id: '',
          typeName: ''
        }
      }
    },
    components: {
      AddDictData,
      EditDictData
    },
    props: {
      propData: {
        type: Object,
        default: function() {
          return {};
        }
      }
    },
    watch: {
      propData: {
        deep: true,
        handler(newVal, oldVal) {
          if (newVal) {
            const that = this
            that.searchForm.typeCode = newVal.typeCode
            that.typeId = newVal.id
            that.typeName = newVal.typeName
            if (newVal.id) {
              that.getDictList()
            } else {
              that.reset()
            }
          }
        }
      }
    },
    methods: {
      /** 查询 */
      getDictPage() {
        this.getDictList()
      },
      
      /** 重置 */
      reset() {
        const that = this
        that.searchForm.dictSearch = ''
        that.searchForm.enabled = null
        that.searchForm.fixed = null
        that.getDictList()
      },

      /** 获取字典列表 */
      getDictList() {
        const that = this
        if (that.searchForm.typeCode) {
          that.loading = true
          getDictDataList(that.searchForm).then(res => {
            if (res.code == 0) {
              that.dictData = res.data
              that.loading = false
            } else {
              that.$message.error(res.message)
            }
          })
        } else {
          that.dictData = []
        }
      },

      /** 添加字典 */
      handleAddDictData() {
        const that = this
        if (!that.searchForm.typeCode) {
          that.$message.warning('请先选择字典分类')
          return false
        }
        let propAddData = {
          dictDataDialogFormVisible: true,
          typeCode: that.searchForm.typeCode,
          len: that.dictData.length + 1,
          typeName: that.typeName
        }
        that.propAddData = JSON.parse(JSON.stringify(propAddData))
      },

      /** 编辑字典 */
      handleEditDict(row) {
        const that = this
        let propEditData = {
          dictDataDialogFormVisible: true,
          typeCode: row.typeCode,
          id: row.id,
          typeName: that.typeName
        }
        that.propEditData = JSON.parse(JSON.stringify(propEditData))
      },

      /** 删除字典 */
      handleDeleteDict(row) {
        const that = this
        that.$confirm('是否确定删除该字典吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteDictData(row.id).then(res => {
              if (res.code == 0) {              
                  that.getDictList()                          
                  that.$message.success('删除成功')
              } else {
                  that.$message.error(res.message)
              }
          })
        })
      },

      /** 添加字典组件和编辑字典组件回传更新字典列表 */
      updateDictDataList() {
        const that = this
        that.getDictList()
      }
    }
}
</script>
<style lang="scss" scoped>
.tableWrapper {
  height: 100%;
}
.tableDiv {
  padding-top: 2px;
  height: calc(100% - 41px)
}

.select /deep/ .el-input--small .el-input__inner {
  width: 90px;
}
/deep/ .el-form--inline .first {
  margin-right: 20px;
}
.search /deep/ .el-form-item {
  margin-bottom: 7px;
  margin-top: -6px;
}
.search /deep/ .el-form-item__label {
  line-height: 41px;
}
.search /deep/ .el-input--mini .el-input__inner {
  width: 120px;
}
.search /deep/ .el-input--suffix .el-input__inner {
  width: 90px;
}
</style>